<template>
	<view class="login">
		<view class="titl-row"><text class="title">登录...</text></view>
		<view class="login-form">
			<view class="username-row"><input v-model="username" class="username" type="text" placeholder="请输入用户名" /></view>
			<view class="password-row"><input v-model="password" class="password" type="password" placeholder="请输入密码" /></view>
			<view class="submit"><button :loading="loading" class="btn-primary block" @click="handleSubmit">登录</button></view>
		</view>
		<view class="change-role">
			<text @click="handleChangeRole">重新选择角色</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			username: '',
			password: ''
		};
	},
	// 页面加载时，判断当前用户是否已登录
	onShow(){
		const token = uni.getStorageSync('SESSION_ID')
		if(token) {
			uni.redirectTo({
				url: '/pages/home/home'
			})
		}
	},
	methods: {
		handleSubmit() {
			// 登录
			const {username, password} = this
			if(!username) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				})
				return false
			} else if(!password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return false
			}
			this.loading = true
			this.$request.login.login({phone: username, password}).then(res => {
				this.loading = false
				if(res.status === 200) {
					uni.setStorageSync('SESSION_ID', res.data.token)
					uni.setStorageSync('INFO', res.data.user)
					uni.navigateTo({
						url: '../home/home'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}).catch((err) =>{
				this.loading = false
				uni.showToast({
					title: '服务器崩溃了',
					icon: 'none'
				})
			})
		},
		//改变角色
		handleChangeRole() {
			uni.removeStorageSync('ROLE')
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	height: 100vh;
	background: $primary;
	box-sizing: border-box;
	padding: 40rpx;
	.change-role {
		padding-top: 40rpx;
		text-align: center;
		color: $white;
		font-size: 28rpx;
	}
	.titl-row {
		margin-top: 120rpx;
		position: relative;
		padding-bottom: 40rpx;
		&:before {
			content: '';
			display: block;
			width: 200rpx;
			height: 8rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 8rpx;
			background: $white;
		}
		.title {
			color: $white;
			font-size: 40rpx;
			font-weight: 700;
		}
	}
	.login-form {
		margin-top: 120rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background: $white;
		border-radius: 0 0 30rpx 30rpx;
		position: relative;
		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: -60rpx;
			width: 100%;
			height: 60rpx;
			border-radius: 30rpx 30rpx 0 0;
			background-color: rgba(255, 255, 255, 0.2);
		}
		.username-row,
		.password-row {
			border-bottom: 1rpx solid $uni-border-color;
			padding: 28rpx;
		}
		.username-row {
			padding-bottom: 40rpx;
		}
		.username,
		.password {
			height: 40rpx;
			border: 0 none;
		}
		.submit {
			padding-top: 60rpx;
		}
	}
}
</style>
